<template>
  <div class="app-container">
    <el-dialog
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
      @close="dialogClose"
      class="aMDialog"
    >
      <div slot="title">
        <span
          style="
            line-height: 24px;
            font-size: 18px;
            color: #303133;
            margin-right: 20px;
          "
        >
          盈亏报告
        </span>
        <el-radio-group
          v-model="networthType"
          size="mini"
          v-if="level === 1 || level === 2 || level === 4 || level === 6"
        >
          <el-radio-button :label="0">单位净值</el-radio-button>
          <el-radio-button :label="1">虚拟净值</el-radio-button>
        </el-radio-group>
      </div>
      <div class="dialog-header">
        <div class="top">
          <div class="top-left">
            <span v-show="dateType === 'year'">
              <span style="margin-right: 5px">每年盈亏</span>
              <span v-show="incomeType === 1">
                年收益率 {{ totalIncomeRate }}%
              </span>
              <span v-show="incomeType === 2">
                年收益金额 {{ totalIncome }}
              </span>
            </span>
            <span v-show="dateType === 'month'">
              <span style="margin-right: 5px">每月盈亏</span>
              <span v-show="incomeType === 1">
                月收益率 {{ totalIncomeRate }}%
              </span>
              <span v-show="incomeType === 2">
                月收益金额 {{ totalIncome }}
              </span>
            </span>
          </div>
          <el-link
            type="primary"
            @click="incomeType === 1 ? (incomeType = 2) : (incomeType = 1)"
          >
            <i class="el-icon-sort"></i>
            <span v-show="incomeType === 1">切换为金额</span>
            <span v-show="incomeType === 2">切换为收益率</span>
          </el-link>
        </div>
        <div class="bottom">
          <el-radio-group v-model="dateType" style="margin-bottom: 30px">
            <el-radio-button label="year">年</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-show="dateType === 'month'"
            v-model="date"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
          <el-date-picker
            v-show="dateType === 'year'"
            v-model="dateYear"
            type="year"
            placeholder="选择年"
          ></el-date-picker>
        </div>
      </div>
      <!-- 月度 -->
      <div v-show="dateType === 'month'" class="monthProfitLoss">
        <el-calendar
          v-model="calendarDate"
          class="tg-el-calendar"
          :first-day-of-week="7"
        >
          <template slot-scope="scope" slot="dateCell">
            <el-tooltip
              placement="right"
              effect="light"
              :disabled="formatIncomeTips(scope.data.day) === null"
            >
              <div slot="content">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div>名称</div>
                  <div v-show="incomeType === 1">贡献度</div>
                  <div v-show="incomeType === 2">收益金额</div>
                </div>
                <div
                  v-for="citem in formatIncomeTips(scope.data.day)"
                  :key="citem.subInvestId"
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div>{{ citem.subInvestName }}</div>
                  <div v-show="incomeType === 1">{{ citem.incomeRate }}%</div>
                  <div v-show="incomeType === 2">{{ citem.income }}</div>
                </div>
              </div>
              <div
                v-if="incomeType === 1"
                :class="{
                  'cell-income': true,
                  negative: formatIncomeRate(scope.data.day) < 0,
                  high: formatIncomeRate(scope.data.day) > 0,
                }"
              >
                <p style="font-size: 18px; padding: 10px 0">
                  {{ scope.data.day.split("-")[2] }}
                </p>
                <p v-if="formatIncomeRate(scope.data.day) > 0">
                  {{ `+${formatIncomeRate(scope.data.day)}` }}%
                </p>
                <p
                  v-else-if="
                    formatIncomeRate(scope.data.day) < 0 ||
                    formatIncomeRate(scope.data.day) === '0.00' ||
                    formatIncomeRate(scope.data.day) === '-0.00'
                  "
                >
                  {{ formatIncomeRate(scope.data.day) }}%
                </p>
                <p v-else>-</p>
              </div>
              <div
                v-if="incomeType === 2"
                :class="{
                  'cell-income': true,
                  negative: formatIncome(scope.data.day) < 0,
                  high: formatIncome(scope.data.day) > 0,
                }"
              >
                <p style="font-size: 18px; padding: 10px 0">
                  {{ scope.data.day.split("-")[2] }}
                </p>
                <p v-if="formatIncome(scope.data.day) > 0">
                  {{ `+${formatIncome(scope.data.day)}` }}
                </p>
                <p
                  v-else-if="
                    formatIncome(scope.data.day) <= 0 ||
                    formatIncome(scope.data.day) === '0.00' ||
                    formatIncome(scope.data.day) === '-0.00'
                  "
                >
                  {{ formatIncome(scope.data.day) }}
                </p>
                <p v-else>-</p>
              </div>
            </el-tooltip>
          </template>
        </el-calendar>
        <div class="weekProfitLoss">
          <div class="title">周汇总</div>
          <div class="cell" v-for="item in weekProfitLossData" :key="item.id">
            <el-tooltip
              placement="right"
              effect="light"
              :disabled="item.incomeReportTips === null"
            >
              <div slot="content">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div>名称</div>
                  <div v-show="incomeType === 1">贡献度</div>
                  <div v-show="incomeType === 2">收益金额</div>
                </div>
                <div
                  v-for="citem in item.incomeReportTips"
                  :key="citem.subInvestId"
                  style="
                    display: flex;
                    justify-content: space-between;
                    min-width: 150px;
                  "
                >
                  <div>{{ citem.subInvestName }}</div>
                  <div v-show="incomeType === 1">{{ citem.incomeRate }}%</div>
                  <div v-show="incomeType === 2">{{ citem.income }}</div>
                </div>
              </div>
              <div
                v-if="incomeType === 1"
                :class="{
                  negative: item.incomeRate < 0,
                  high: item.incomeRate > 0,
                }"
              >
                <p style="height: 40px"></p>
                <p v-if="item.incomeRate > 0">{{ `+${item.incomeRate}` }}%</p>
                <p
                  v-else-if="
                    item.incomeRate < 0 ||
                    item.incomeRate === '0.00' ||
                    item.incomeRate === '-0.00'
                  "
                >
                  {{ `${item.incomeRate}` }}%
                </p>
                <p v-else>-</p>
              </div>
              <div
                v-if="incomeType === 2"
                :class="{
                  negative: item.income < 0,
                  high: item.income > 0,
                }"
              >
                <p style="height: 40px"></p>
                <p v-if="item.income > 0">{{ `+${item.income}` }}</p>
                <p
                  v-else-if="
                    item.income < 0 ||
                    item.income === '0.00' ||
                    item.income === '-0.00'
                  "
                >
                  {{ `${item.income}` }}
                </p>
                <p v-else>-</p>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- 年度 -->
      <div class="yearIncom" v-show="dateType === 'year'">
        <div
          class="cell"
          v-for="item in yearMonth"
          :key="item.id"
          @click="jumpMonth(item)"
        >
          <el-tooltip
            placement="right"
            effect="light"
            :disabled="item.incomeReportTips === null"
          >
            <div slot="content">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  min-width: 150px;
                "
              >
                <div>名称</div>
                <div v-show="incomeType === 1">贡献度</div>
                <div v-show="incomeType === 2">收益金额</div>
              </div>
              <div
                v-for="citem in item.incomeReportTips"
                :key="citem.subInvestId"
                style="
                  display: flex;
                  justify-content: space-between;
                  min-width: 150px;
                "
              >
                <div>{{ citem.subInvestName }}</div>
                <div v-show="incomeType === 1">{{ citem.incomeRate }}%</div>
                <div v-show="incomeType === 2">{{ citem.income }}</div>
              </div>
            </div>
            <div
              v-if="incomeType === 1"
              :class="{
                'cell-income': true,
                negative: item.incomeRate < 0,
                high: item.incomeRate > 0,
              }"
            >
              <p style="font-size: 18px; padding: 10px 0">
                {{ item.month }}
              </p>
              <p v-if="item.incomeRate > 0">{{ `+${item.incomeRate}` }}%</p>
              <p
                v-else-if="
                  item.incomeRate < 0 ||
                  item.incomeRate === '0.00' ||
                  item.income === '-0.00'
                "
              >
                {{ `${item.incomeRate}` }}%
              </p>
              <p v-else>-</p>
            </div>
            <div
              v-if="incomeType === 2"
              :class="{
                'cell-income': true,
                negative: item.income < 0,
                high: item.income > 0,
              }"
            >
              <p style="font-size: 18px; padding: 10px 0">
                {{ item.month }}
              </p>
              <p v-if="item.income > 0">{{ `+${item.income}` }}</p>
              <p
                v-else-if="
                  item.income < 0 ||
                  item.income === '0.00' ||
                  item.income === '-0.00'
                "
              >
                {{ `${item.income}` }}
              </p>
              <p v-else>-</p>
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getIncomeReport } from "@/api/afterInvest";
// import moment from 'moment'
/**
 * 2.年时间切换
 * 2.月周收益展示
 *
 */
export default {
  name: "ProfitLossDialog",
  data: () => {
    return {
      totalIncome: 0,
      totalIncomeRate: 0,
      formData: {
        year: "",
        month: "",
        investId: "", // 子投资id
      },
      yearMonth: [
        {
          month: "一月",
          id: 1,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "二月",
          id: 2,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "三月",
          id: 3,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "四月",
          id: 4,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "五月",
          id: 5,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "六月",
          id: 6,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "七月",
          id: 7,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "八月",
          id: 8,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "九月",
          id: 9,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "十月",
          id: 10,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "十一月",
          id: 11,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
        {
          month: "十二月",
          id: 12,
          income: "",
          incomeRate: "",
          incomeReportTips: null,
        },
      ],
      weekProfitLossData: [
        { week: "第一周", id: 1, income: "", incomeRate: "" },
        { week: "第二周", id: 2, income: "", incomeRate: "" },
        { week: "第三周", id: 3, income: "", incomeRate: "" },
        { week: "第四周", id: 4, income: "", incomeRate: "" },
        { week: "第五周", id: 5, income: "", incomeRate: "" },
        { week: "第六周", id: 6, income: "", incomeRate: "" },
      ],
      date: "",
      dateYear: new Date(),
      dateType: "month",
      networthType: 0,
      incomeType: 1,
      calendarDate: "",
      dialogVisible: false,
      profitLossData: [],
      earnType: 1,
    };
  },
  props: {
    profitLossDialogVisible: {
      type: Boolean | Number,
      default: "",
    },
    investId: {
      type: Number | String,
      default: "",
    },
    level: {
      type: Number | String,
      default: 4,
    },
  },
  watch: {
    profitLossDialogVisible(newVal, oldVal) {
      if (newVal) {
        this.dialogVisible = newVal;
        this.formData.investId = this.investId;
        if (this.formData.year !== "") {
          this.getIncomeReport();
        }
        // this.$nextTick(() => {
        this.calendarDate = new Date();
        // });
      }
    },
    date(newVal, oldVal) {
      this.calendarDate = new Date(newVal);
    },
    // 选择年
    dateYear(newVal, oldVal) {
      this.formData.year = newVal.getFullYear();
      this.formData.month = "";
      this.getIncomeReport();
    },
    // 切换年/月
    dateType(newVal, oldVal) {
      if (newVal === "year") {
        this.formData.year = this.dateYear
          ? this.dateYear.getFullYear()
          : new Date().getFullYear();
        this.formData.month = "";
      } else {
        this.formData.month = this.date.getMonth() + 1;
      }
      this.getIncomeReport();
    },
    // 切换 单位净值/虚拟净值
    networthType(newVal, oldVal) {
      this.getIncomeReport();
    },
    // 选中日期
    calendarDate(newVal, oldVal) {
      const year = newVal.getFullYear();
      const month = newVal.getMonth() + 1;
      const old_year = oldVal ? oldVal.getFullYear() : "";
      const old_month = oldVal ? oldVal.getMonth() + 1 : "";
      if (year !== old_year || month !== old_month) {
        this.date = new Date(`${year}-${month}-01`);
        this.formData.year = year;
        this.formData.month = month;
        this.getIncomeReport();
      }
    },
  },
  computed: {
    formatIncomeTips() {
      return function (date) {
        let now_row = [];
        for (let index = 0; index < this.profitLossData.length; index++) {
          const item = this.profitLossData[index];
          const incomeReportQueryResponse =
            item.incomeReportQueryResponse || [];
          now_row = incomeReportQueryResponse.filter((citem) => {
            return citem.date.indexOf(date) !== -1;
          });
          if (now_row.length) {
            break;
          }
        }
        if (now_row.length) {
          return now_row[0].incomeReportTips;
        }
        return null;
      };
    },
    formatIncome() {
      return function (date) {
        let now_row = [];
        for (let index = 0; index < this.profitLossData.length; index++) {
          const item = this.profitLossData[index];
          const incomeReportQueryResponse =
            item.incomeReportQueryResponse || [];
          now_row = incomeReportQueryResponse.filter((citem) => {
            return citem.date.indexOf(date) !== -1;
          });
          if (now_row.length) {
            break;
          }
        }
        if (now_row.length) {
          return now_row[0].income;
        }
        return "";
      };
    },
    formatIncomeRate() {
      return function (date) {
        let now_row = [];
        for (let index = 0; index < this.profitLossData.length; index++) {
          const item = this.profitLossData[index];
          const incomeReportQueryResponse =
            item.incomeReportQueryResponse || [];
          now_row = incomeReportQueryResponse.filter((citem) => {
            return citem.date.indexOf(date) !== -1;
          });
          if (now_row.length) {
            break;
          }
        }
        if (now_row.length) {
          return now_row[0].incomeRate;
        }
        return "";
      };
    },
  },
  created: () => {
    // console.log('created')
  },
  mounted: () => {
    // console.log('mounted')
  },
  methods: {
    getIncomeReport() {
      getIncomeReport({
        level: this.level,
        networthType: this.networthType,
        ...this.formData,
      }).then((res) => {
        this.totalIncome = res.body.totalIncome;
        this.totalIncomeRate = res.body.totalIncomeRate;
        if (this.dateType === "month") {
          this.profitLossData = res.body.incomeReportQueryVos;
          this.weekProfitLossData = [
            { week: "第一周", id: 1, income: "", incomeRate: "" },
            { week: "第二周", id: 2, income: "", incomeRate: "" },
            { week: "第三周", id: 3, income: "", incomeRate: "" },
            { week: "第四周", id: 4, income: "", incomeRate: "" },
            { week: "第五周", id: 5, income: "", incomeRate: "" },
            { week: "第六周", id: 6, income: "", incomeRate: "" },
          ];
          this.weekProfitLossData.map((item) => {
            const row = res.body.incomeReportQueryVos.filter((citem) => {
              return citem.weekOrMonth === item.id;
            });
            if (row.length) {
              item.income = row[0].weekOrMonthIncome;
              item.incomeRate = row[0].weekOrMonthIncomeRate;
              item.incomeReportTips = row[0].incomeReportTips;
            } else {
              item.income = "";
              item.incomeRate = "";
              item.incomeReportTips = null;
            }
          });
          /**
           * 如果一号是周日则周arr下标+1
           */
          const day = new Date(
            `${this.formData.year}-${this.formData.month}-01`
          ).getDay();
          if (day === 0) {
            this.weekProfitLossData.pop();
            this.weekProfitLossData.unshift({
              week: "",
              id: 0,
              income: "",
              incomeRate: "",
              incomeReportTips: null,
            });
          }
        } else {
          this.yearMonth.map((item) => {
            const row = res.body.incomeReportQueryVos.filter((citem) => {
              return citem.weekOrMonth === item.id;
            });
            if (row.length) {
              item.income = row[0].weekOrMonthIncome;
              item.incomeRate = row[0].weekOrMonthIncomeRate;
              item.incomeReportTips = row[0].incomeReportTips;
            } else {
              item.income = "";
              item.incomeRate = "";
              item.incomeReportTips = null;
            }
          });
        }
      });
    },
    // 跳转到指定月
    jumpMonth(row) {
      this.date = new Date(this.date.getFullYear() + "-" + row.id + "-01");
      this.dateType = "month";
    },
    dialogClose() {
      this.$emit("update:profitLossDialogVisible", false);
    },
  },
};
</script>
<style lang="scss">
// .el-calendar-table {
// }
.tg-el-calendar {
  .el-calendar-day {
    padding: 0;
    background-color: #fff;
  }
  // td {
  // border-bottom: 1px solid #fff;
  // border-right: 1px solid #fff;
  // }
  .el-calendar__header {
    display: none;
  }
  .el-calendar__body {
    padding: 12px 0px 0;
    border-top: 1px solid #ebeef5;
  }
}
</style>
<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}
.cell-income {
  height: 100%;
  text-align: center;
}
.dialog-header {
  .top {
    display: flex;
    padding-bottom: 15px;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    height: 66px;
  }
}
.negative {
  background: #daeed5;
}
.high {
  background: #fcc6ba;
}
.yearIncom {
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  .cell {
    cursor: pointer;
    width: 108px;
    height: 85px;
    display: inline-block;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    vertical-align: top;
  }
}
.monthProfitLoss {
  display: flex;
  justify-content: center;
  .weekProfitLoss {
    padding: 12px 0px 0;
    width: 105px;
    min-width: 105px;
    border-top: 1px solid #ebeef5;
    .title {
      padding: 12px 0;
      color: #606266;
      font-weight: 400;
      font-size: 14px;
      text-align: center;
    }
    .cell {
      &:nth-child(2) {
        border-top: 1px solid #ebeef5;
      }
      width: 108px;
      height: 86px;
      overflow: hidden;
      display: inline-block;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      vertical-align: top;
      text-align: center;
      .negative {
        height: 100%;
      }
      .high {
        height: 100%;
      }
    }
  }
}
</style>
